<template>
  <div class="amap-page-container">
    <el-amap class="amap-box" :zoom="zoom" :center="center" :plugin="plugin" pitch-enable="false">
      <el-amap-marker v-for="marker in markers" :position="marker.position" :key="marker.id" :icon="marker.icon"></el-amap-marker>
    </el-amap>
  </div>
</template>

<script>
const iconObj = {
  empty: require('images/user-car/empty.png'),
  offline: require('images/user-car/offline.png'),
  useCar: require('images/user-car/online.png'),
  ordered: require('images/user-car/online.png'),
  repair: require('images/user-car/repair.png')
}

export default {
  props: {
    initData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      center: [],
      zoom: 16, // 地图放大倍数
      plugin: ['ToolBar', 'Scale'],
      markers: []
    }
  },
  computed: {
    formModel: {
      get() {
        return this.initData
      },
      set(val) {
        this.$emit('update:init-data', val)
      }
    }
  },
  created() {
    const { carRunLongitude, carRunLatitude, carRunStatus } = this.initData
    const markers = {
      position: [carRunLongitude, carRunLatitude],
      icon: iconObj[carRunStatus]
    }
    this.markers.push(markers)
    this.center = [carRunLongitude, carRunLatitude]
  }
}
</script>

<style lang="less" scoped>
.amap-page-container {
  position: relative;
  height: 88vh;
  margin: 0 10px;
  .msgTip {
    font-size: @f14;
    line-height: 30px;
    color: @danger;
  }
}
</style>
